<template>
  <a-modal
    title="编辑权限"
    :width='640'
    :visible='visible'
    :confirmLoading='loading'
    :maskClosable='false'
    @ok='ok'
    @cancel='cancel'
  >
    <a-spin :spinning='loading' v-if='visible'>
      <a-form-model
        ref='form'
        :model='model'
        :rules='rules'
        :label-col='labelCol'
        :wrapper-col='wrapperCol'
      >
        <a-form-model-item label='路由' prop='name'>
          <a-input v-model='model.name' :disabled=true />
        </a-form-model-item>
        <a-form-model-item label='备注' prop='description'>
          <a-input  v-model='model.description' />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    defaultValues: {
      type: Object,
      default: () => {
        return {
          name: '',
          description: '',
        }
      }
    }
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },

      rules: {
        description: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 2, max: 10, message: '备注最多2-10个字符', trigger: 'blur' }
        ]
      },
      model: {
        name: '',
        description: '',
      },

      showPassword: false
    }
  },
  created() {
    this.$watch('defaultValues', val => {
      this.model = { ...val }
    }, { deep: true, immediate: true })
  },
  methods: {
    ok() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('ok', this.model)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.$refs.form.resetFields()
      this.$emit('cancel', this.model)
    }
  }
}
</script>
